import React, { Component } from 'react'
import { LeftOutlined, RightOutlined, AlipayCircleOutlined, WechatOutlined, CheckCircleTwoTone } from "@ant-design/icons"
import { Modal, Drawer, Button } from 'antd'
import { connect } from 'react-redux';
import action from '../../store/action';
class ConfirmOrder extends Component {
    state = {
        isShow: false, //支付方式弹框
        active: 1,//1微信支付0支付宝支付
        visible: false, //确定支付弹框
        confirmLoading: false,//内容渲染
        orderTime: ""
    }

    showModal = () => {
        this.setState({
            visible: true,
            orderTime: new Date().toLocaleString()
        });
    };
    handleOk = e => {
        this.setState({
            confirmLoading: true,
        });
        let { classifyDetail } = this.props
        let {youhuiPrice,moneys} = this.money()
        let obj = {
            ...classifyDetail,
            count:1,
            PaymentTime:new Date().toLocaleDateString(),
            orderTime:this.state.orderTime,
            modePayment:this.state.active,
            preferentialPrice:youhuiPrice,
            favourablePrice:moneys,
            paymentStatus:true,
            userTel:1506060378,
            orderFlag:'已处理'
        }
        this.props.addOrderList(obj)
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false, 
            });
            this.props.history.push("/home")
        }, 1000);   
        this.props.addOrder(obj)
    };


    handleCancel = e => {
        this.setState({
            visible: false,
        });
        let { classifyDetail } = this.props
        let { youhuiPrice, moneys } = this.money()
        let obj = {
            ...classifyDetail,
            count:1,
            PaymentTime: new Date().toLocaleDateString(),
            orderTime: this.state.orderTime,
            modePayment: this.state.active,
            preferentialPrice: youhuiPrice,
            favourablePrice: moneys,
            paymentStatus: false,
            userTel:1506060378,
            orderFlag:'已处理'
        }
        this.props.addOrderList(obj)
        this.props.history.push("/order")
        this.props.addOrder(obj)
    };
    render() {
        let { youhui, classifyDetail } = this.props
        return (
            <div className="confirmOrder">
                <h2>
                    {/* 返回 */}
                    <span onClick={() => {
                        this.props.history.push("/particulars")
                    }}><LeftOutlined /></span>
                    确认订单
                </h2>
                <div className="orderMain">
                    <div className="orderMsg">
                        <div className="ordertit">
                            <h2>{classifyDetail.classTitle}</h2>
                            <span>
                                优惠价
                                <b>￥{this.money().moneys}</b>
                            </span>
                        </div>
                        <div className="orderUser">
                            {/* {classifyDetail.teacher} */}
                            张丽
                        </div>
                        <div className="modePayment">
                            <span>支付方式</span>
                            <span onClick={() => {
                                this.setState({ isShow: true })
                            }}>微信支付 <RightOutlined /></span>
                        </div>
                    </div>
                    <div className="discounts">
                        {
                            youhui.length !== 0 ? youhui.map((item, i) => {
                                return <p key={i}>
                                    <span>惠</span>
                                    <span>满{item.price}减{item.price}元</span>
                                    <RightOutlined className="OrderRig" />
                                </p>
                            }) : <p>暂无可用优惠券</p>
                        }
                        <div className="discountsExplain">
                            <span>优惠券无法累积使用</span>
                            <span>新课上架优惠
                                <b>￥{this.money().youhuiPrice}</b>
                            </span>

                        </div>
                    </div>
                    <div className="orderFoot">
                        <p>
                            <span>
                                待支付合计:
                                <b>￥{this.money().moneys}</b>
                            </span>
                            <span>
                                已优惠
                                <b>￥{this.money().youhuiPrice}</b>
                            </span>
                        </p>
                        <p>
                            <Button className="orderFootBtn" type="primary" onClick={this.showModal}>提交订单</Button>
                        </p>
                    </div>
                    <Drawer
                        className="Orderlayer"
                        height="5.946667rem"
                        headerStyle={{ borderBottom: "none", textAlign: 'center' }}
                        contentWrapperStyle={{ borderTopRightRadius: ".266667rem", borderTopLeftRadius: ".26667rem", overflow: "hidden" }} title="请选择支付方式" placement="bottom" onClose={() => {
                            this.setState({ isShow: false })
                        }} visible={this.state.isShow}>
                        <p className="Alipay"
                            onClick={() => {
                                this.setState({ active: 0 })
                                setTimeout(() => {
                                    this.setState({ isShow: false })
                                }, 200)
                            }}
                        >
                            <AlipayCircleOutlined />
                            <span>支付宝支付</span>
                            <span className="alipayRig">
                                <CheckCircleTwoTone twoToneColor={this.state.active === 0 ? "#91cfa4" : "#ddd"} />
                            </span>
                        </p>
                        <p className="WeChat" onClick={() => {
                            this.setState({ active: 1 })
                            setTimeout(() => {
                                this.setState({ isShow: false })
                            }, 200)
                        }}>
                            <WechatOutlined />
                            <span>微信支付</span>
                            <span className="wechatRig">
                                <CheckCircleTwoTone twoToneColor={this.state.active === 1 ? "#91cfa4" : "#ddd"} />
                            </span>
                        </p>
                    </Drawer>
                    <Modal
                        title="请确认支付"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        okText="确定"
                        cancelText="取消"
                        confirmLoading={this.state.confirmLoading}
                        onCancel={this.handleCancel}
                    >
                        <div>
                            {this.state.confirmLoading === true ? "支付成功" : <div className="orderMsg">
                                <div className="ordertit">
                                    <h2>{classifyDetail.classTitle}</h2>
                                    <span>
                                        优惠价
                                        <b>￥{this.money().moneys}</b>
                                    </span>
                                </div>
                                <div className="orderUser">
                                    讲师:{classifyDetail.teacher}
                                </div>
                                <div className="modePayment">
                                    <span>支付方式:</span>
                                    <span>
                                        {this.state.active === 1 ? "微信支付" : "支付宝支付"}
                                    </span>
                                </div>
                            </div>}
                        </div>
                    </Modal >
                </div ></div>)
    }
    // 优惠券价格
    money() {
        let { youhui, classifyDetail } = this.props
        let sortYouhui = youhui.sort((a, b) => { return b.price - a.price })
        if (sortYouhui.length !== 0) {
            let a = youhui.find(item => {
                return Number(classifyDetail.classPrice) >= Number(item.price)
            })
            return { moneys: Number(classifyDetail.classPrice) - Number(a.price), youhuiPrice: a.price }
        } else {
            return { moneys: Number(classifyDetail.classPrice), youhuiPrice: 0 }
        }
    }
    componentDidMount() {

        let { toYouhui, youhui, toClassifyDetail, classifyDetail } = this.props
        if (classifyDetail.length === 0) {
            toClassifyDetail()
        }

    }
}
export default connect(state => state.home, action.home)(ConfirmOrder)
